<template>
  <div class="box">
    <a-row :gutter="[8, 12]" class="content">
      <a-col :span="8" @click="addTemplate">
        <a-card class="add-template"> <PlusOutlined /> 新增模板 </a-card>
      </a-col>
      <a-col :span="8" v-for="list in temlate" :key="list.id">
        <a-card class="templat-list">
          <a-card-meta :title="list.name" class="card-list">
            <template #description>
              <span>应用楼宇：</span>
              <span>{{ list.build_names }} </span>
            </template>
            <template #avatar>
              <cu-icon type="org-fapiao" class="icon"></cu-icon>
            </template>
          </a-card-meta>
          <template class="ant-card-actions" #actions>
            <span
              v-if="list.online_preview.previewUrl"
              @click="previewClick(list)"
              ><EyeOutlined />&nbsp;&nbsp;在线预览</span
            >
            <span @click="edit(list.id)"
              ><SettingOutlined />&nbsp;&nbsp;编辑</span
            >
            <span @click="delet(list.id)"
              ><DeleteOutlined />&nbsp;&nbsp;删除</span
            >
          </template>
        </a-card>
      </a-col>
      <a-col :span="24" class="text-right mt-10">
        <a-pagination
          show-size-changer
          v-model:current="templatePage"
          v-model:pageSize="templatePageSize"
          :total="templatePageTotal"
          @showSizeChange="templateList"
          @change="templateList"
        />
      </a-col>
    </a-row>
    <!-- 添加收据模板 -->
    <AddTemplate
      :visible="visible"
      :id="editId"
      @success="successClose"
      @onCancel="closable"
    />

    <!-- 预览 -->
    <ElectronContractModal
      :visible="electronContractVisible"
      :urlData="previewUrlData"
      :esignDetail="{
        esignCheck: true,
      }"
      title="在线预览"
      @close="electronContractVisible = false"
    />
  </div>
</template>

<script>
import { computed, defineComponent, ref, watch } from "vue";
import {
  SettingOutlined,
  DeleteOutlined,
  PlusOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import AddTemplate from "./addTemplate.vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import { message } from "ant-design-vue";
import ElectronContractModal from "../../../../components/ElectronContractModal/index.vue";

export default defineComponent({
  name: "TemplateList",
  components: {
    SettingOutlined,
    DeleteOutlined,
    AddTemplate,
    PlusOutlined,
    EyeOutlined,
    ElectronContractModal,
  },
  setup() {
    const visible = ref(false);
    const addTemplate = () => {
      visible.value = true;
      editId.value = 0;
    };
    const closable = () => {
      visible.value = false;
    };
    const successClose = () => {
      visible.value = false;
      templateList();
    };

    const delet = (id) => {
      utils.modalConfirm({
        content: "删除后无法恢复，确认删除该模板吗？",
        okType: "danger",
        centered: true,
        onOk: () => {
          request.del("/org", "/receipt/templateDel", { id }).then((res) => {
            templatePage.value =
              temlate.value.length == 1
                ? templatePage.value - 1
                : templatePage.value;
            message.success(res.msg || "删除成功");
            templateList();
          });
        },
      });
    };
    const editId = ref(0);
    const edit = (id) => {
      visible.value = true;
      editId.value = id;
    };

    //在线预览
    const electronContractVisible = ref(false);
    const previewUrlData = ref({});
    const previewClick = (item) => {
      if (item.online_preview.previewUrl) {
        previewUrlData.value = {
          previewUrl: item.online_preview.previewUrl,
          url: item.template_path,
        };
      }
      electronContractVisible.value = true;
    };

    const templatePage = ref(1);
    const templatePageSize = ref(10);
    const templatePageTotal = ref(0);
    const temlate = ref([]);

    const templateList = () => {
      request
        .get("/org", "/receipt/templateList", {
          page: templatePage.value,
          limit: templatePageSize.value,
        })
        .then((res) => {
          temlate.value = res.list;
          templatePageTotal.value = res.total;
        });
    };
    templateList();

    return {
      addTemplate,
      closable,
      successClose,
      edit,
      delet,
      templateList,
      visible,
      temlate,
      editId,
      templatePage,
      templatePageSize,
      templatePageTotal,
      previewClick,
      electronContractVisible,
      previewUrlData,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  overflow-y: auto;
  // padding: 5px 20px;
  padding-bottom: 20px;
  overflow-x: hidden;
  .content {
    overflow: hidden;
  }
  .add-template {
    width: 100%;
    height: 230px;
    border: 1px dashed #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #929292;
    cursor: pointer;
    font-size: 20px;
  }
  .icon {
    font-size: 48px;
    color: @primary-color;
  }
  .templat-list {
    width: 100%;
    height: 100%;
    .card-list {
      height: 140px;
      overflow-y: auto;
    }
  }
}
</style>
